<template>
	<view class="introduce">
		<view class="section">
			<view class="title">介绍内容</view>
			<textarea v-model="companyComments.content" maxlength="500" cols="30" rows="10" placeholder="请输入企业介绍内容"></textarea>
		</view>
		<view class="tips">您可以选择最多5张不超过10MB的jpg、jpeg、png图片,推荐图片尺寸为 638*340，长按图片可拖拽排序 </view>
		<view class="img-box">
			<view v-for="(item, index) in companyComments.imgs" key="index" class="img">
				<image :src="item" mode=""></image>
				<icon type="clear" size="20" @tap="remove(index)"/>
			</view>			
			<view v-if="companyComments.imgs.length < 5" class="add-btn" @tap="chooseImg">上传图片</view>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
			  title: 'Hello',
			  value: 1,
			  userInfo: {},
			  companyComments: {
				content: '',
				imgs: []
			  }
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async upload(filePath) {
				// infra/file/upload?path=yudaoyuanma.png
				// http({
				// 	url: `infra/file/upload?path=yudaoyuanma.png`,
				// 	method: 'put',
				// 	data: {
				// 		...this.form
				// 	}
				// })
				const fileName = filePath.split('/').pop()
				await uni.uploadFile({
				      url: `https://ywtmp.hnwytkj.com/app-api/infra/file/upload?path=${fileName}`, //仅为示例，非真实的接口地址
				      filePath,
				      name: 'file',
				      // formData: {},
				      success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data)
				        console.log(uploadFileRes.data);
						if (res.code === 0) {
							this.companyComments.imgs.push(res.data)
						}
				      },
					  fail: (res) => {
						  console.log(res)
					  }
				    });
			},
			async chooseImg(key) {
				uni.chooseImage({
				    count: 5, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
					success: async (res) => {
						console.log(res.tempFilePaths)						
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const item = res.tempFilePaths[i]							
							await this.upload(item)
						}
					}
				});				
			},
			remove(index) {
				this.companyComments.imgs.splice(index, 1)
			},
			submit() {
				if (!this.companyComments) {
					uni.showToast({
						title: '请填写企业介绍',
						icon: 'none'
					});
					return false;
				}
				http({
					url: 'card/user-profile/module/update',
					method: 'put',
					data: {
						...this.info,
						companyComments: JSON.stringify(this.companyComments)
					}
				}).then(res => {				
					if(res.code === 0) {
						uni.showToast({
							title: '保存成功',
							icon: "success"
						});
					}
				})
			},
			getData() {
				http({
					url: `card/user-profile/get`
				}).then(res => {				
					if(res.code === 0) {
						const data = res.data						
						try{
							// this.companyComments = {content: '', imgs: []}
							this.companyComments = (data.companyProfileDO.companyComments ? JSON.parse(data.companyProfileDO.companyComments) : {content: '', imgs: []})
						}catch(e){
							//TODO handle the exception
							this.companyComments = {content: '', imgs: []}
						}	
						this.info = data.companyProfileDO
					}
				})		
			}
		},
	}
</script>

<style lang="scss" scoped>
	.introduce {
		background: #F0F0F4;
		min-height: 100vh;
		padding: 20rpx;
		padding: 20rpx 20rpx calc(140rpx + var(--safe-area-inset-bottom));
		box-sizing: border-box;
		font-family: PingFang SC;
		.section {
			// height: 908rpx;
			height: 508rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 40rpx;
			box-sizing: border-box;
			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 25rpx;
			}
			textarea {
				font-weight: 500;
				font-size: 28rpx;
				// color: #CCCCCC;
				color: #333333;
				border-radius: 10rpx;
				border: 1rpx solid #EEEEEE;
				width: 100%;
				// height: 773rpx;
				height: 373rpx;
				box-sizing: border-box;
				padding: 28rpx 24rpx;
				&::placeholder {
					color: #CCCCCC;
				}
			}
		}
		.tips {
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
			line-height: 40rpx;
			margin: 20rpx 0 24rpx;
		}
		.img-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.img {
				width: 162rpx;
				height: 162rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 40rpx;
				position: relative;
				image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 20rpx;					
				}
				icon {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}			
			.add-btn {
				width: 162rpx;
				height: 162rpx;
				background: #E6ECFF;
				border-radius: 20rpx;
				border: 1rpx dashed #4B73FF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #4B73FF;
				margin-bottom: 40rpx;
			}
		}
		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx calc(20rpx + var(--safe-area-inset-bottom));
			box-sizing: border-box;
			background-color: #FFFFFF;
			.btn {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: #4B73FF;
				border-radius: 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				// margin-top: 42rpx;
			}
		}
	}
</style>